<template>
  <div class="points-record-detail-page">
    <!-- 记录头部 -->
    <div class="record-header">
      <div class="record-type" :class="record.type">
        <div class="type-icon">
          <van-icon :name="getTypeIcon(record.type)" />
        </div>
        <div class="type-info">
          <div class="type-title">{{ getTypeTitle(record.type) }}</div>
          <div class="points-amount">
            <span class="points-sign">{{ record.type === 'earned' ? '+' : '-' }}</span>
            <span class="points-value">{{ record.points }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 记录详情 -->
    <div class="record-details">
      <div class="detail-section">
        <h3 class="section-title">基本信息</h3>
        <div class="detail-item">
          <span class="item-label">标题</span>
          <span class="item-value">{{ record.title }}</span>
        </div>
        <div class="detail-item" v-if="record.description">
          <span class="item-label">描述</span>
          <span class="item-value">{{ record.description }}</span>
        </div>
        <div class="detail-item">
          <span class="item-label">来源</span>
          <span class="item-value">{{ getSourceText(record.source) }}</span>
        </div>
        <div class="detail-item">
          <span class="item-label">状态</span>
          <span class="item-value">
            <span class="status-badge" :class="record.status">
              {{ getStatusText(record.status) }}
            </span>
          </span>
        </div>
      </div>

      <div class="detail-section">
        <h3 class="section-title">积分信息</h3>
        <div class="detail-item">
          <span class="item-label">变动前余额</span>
          <span class="item-value">{{ record.balanceBefore || 0 }}</span>
        </div>
        <div class="detail-item">
          <span class="item-label">变动后余额</span>
          <span class="item-value">{{ record.balanceAfter || 0 }}</span>
        </div>
        <div class="detail-item" v-if="record.expireDate">
          <span class="item-label">过期时间</span>
          <span class="item-value">{{ formatDate(record.expireDate) }}</span>
        </div>
      </div>

      <div class="detail-section" v-if="record.orderId">
        <h3 class="section-title">关联订单</h3>
        <div class="detail-item">
          <span class="item-label">订单号</span>
          <span class="item-value order-link" @click="goToOrder(record.orderId)">
            {{ record.orderId }}
            <van-icon name="arrow" />
          </span>
        </div>
      </div>

      <div class="detail-section">
        <h3 class="section-title">时间信息</h3>
        <div class="detail-item">
          <span class="item-label">创建时间</span>
          <span class="item-value">{{ formatDateTime(record.createTime) }}</span>
        </div>
        <div class="detail-item" v-if="record.updateTime && record.updateTime !== record.createTime">
          <span class="item-label">更新时间</span>
          <span class="item-value">{{ formatDateTime(record.updateTime) }}</span>
        </div>
      </div>

      <div class="detail-section" v-if="record.extra && Object.keys(record.extra).length > 0">
        <h3 class="section-title">额外信息</h3>
        <div class="extra-info">
          <pre class="extra-json">{{ JSON.stringify(record.extra, null, 2) }}</pre>
        </div>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <van-button 
        type="default" 
        size="large" 
        @click="goBack"
        class="back-btn"
      >
        返回
      </van-button>
    </div>

    <!-- 加载状态 -->
    <van-loading v-if="loading" class="page-loading" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showToast } from 'vant'
import { getPointsRecordDetail } from '@/api/points'

const route = useRoute()
const router = useRouter()

// 响应式数据
const record = ref({})
const loading = ref(true)

// 生命周期
onMounted(() => {
  const recordId = route.params.id
  if (recordId) {
    loadRecordDetail(recordId)
  } else {
    showToast('记录ID不存在')
    goBack()
  }
})

// 方法
const loadRecordDetail = async (recordId) => {
  try {
    loading.value = true
    const data = await getPointsRecordDetail(recordId)
    record.value = data
  } catch (error) {
    console.error('加载积分记录详情失败:', error)
    showToast('加载记录详情失败')
    goBack()
  } finally {
    loading.value = false
  }
}

const getTypeIcon = (type) => {
  const iconMap = {
    'earned': 'plus',
    'used': 'minus',
    'expired': 'clock-o'
  }
  return iconMap[type] || 'info-o'
}

const getTypeTitle = (type) => {
  const titleMap = {
    'earned': '获得积分',
    'used': '使用积分',
    'expired': '积分过期'
  }
  return titleMap[type] || '积分变动'
}

const getSourceText = (source) => {
  const sourceMap = {
    'purchase': '购买商品',
    'signin': '签到奖励',
    'activity': '活动奖励',
    'exchange': '积分兑换',
    'refund': '退款返还',
    'admin': '管理员操作'
  }
  return sourceMap[source] || source || '未知来源'
}

const getStatusText = (status) => {
  const statusMap = {
    'success': '成功',
    'pending': '处理中',
    'failed': '失败',
    'expired': '已过期'
  }
  return statusMap[status] || status
}

const formatDate = (dateStr) => {
  if (!dateStr) return ''
  try {
    const date = new Date(dateStr)
    return date.toLocaleDateString('zh-CN')
  } catch (error) {
    return dateStr
  }
}

const formatDateTime = (dateStr) => {
  if (!dateStr) return ''
  try {
    const date = new Date(dateStr)
    return date.toLocaleString('zh-CN')
  } catch (error) {
    return dateStr
  }
}

const goToOrder = (orderId) => {
  router.push(`/order-detail/${orderId}`)
}

const goBack = () => {
  router.back()
}
</script>

<style lang="scss" scoped>
.points-record-detail-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 20px;
}

.record-header {
  background: linear-gradient(135deg, #157658 0%, #2d8f7a 100%);
  margin: 10px;
  border-radius: 12px;
  padding: 30px 20px;
  color: #fff;
  
  .record-type {
    display: flex;
    align-items: center;
    
    .type-icon {
      font-size: 48px;
      margin-right: 20px;
      opacity: 0.9;
    }
    
    .type-info {
      flex: 1;
      
      .type-title {
        font-size: 18px;
        margin-bottom: 10px;
        opacity: 0.9;
      }
      
      .points-amount {
        font-size: 32px;
        font-weight: bold;
        
        .points-sign {
          margin-right: 4px;
        }
        
        .points-value {
          font-size: 36px;
        }
      }
    }
  }
}

.record-details {
  margin: 10px;
  
  .detail-section {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 10px;
    
    .section-title {
      font-size: 16px;
      font-weight: bold;
      color: #333;
      margin: 0 0 15px 0;
      padding-bottom: 10px;
      border-bottom: 1px solid #f0f0f0;
    }
    
    .detail-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid #f8f8f8;
      
      &:last-child {
        border-bottom: none;
      }
      
      .item-label {
        font-size: 14px;
        color: #666;
        min-width: 80px;
      }
      
      .item-value {
        font-size: 14px;
        color: #333;
        text-align: right;
        flex: 1;
        margin-left: 20px;
        
        &.order-link {
          color: #157658;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          
          .van-icon {
            margin-left: 5px;
            font-size: 12px;
          }
          
          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
    
    .extra-info {
      .extra-json {
        background-color: #f8f8f8;
        padding: 15px;
        border-radius: 6px;
        font-size: 12px;
        color: #666;
        white-space: pre-wrap;
        word-break: break-all;
        margin: 0;
        max-height: 200px;
        overflow-y: auto;
      }
    }
  }
}

.status-badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  
  &.success {
    background-color: #e8f5e8;
    color: #4caf50;
  }
  
  &.pending {
    background-color: #fff3e0;
    color: #ff9800;
  }
  
  &.failed {
    background-color: #ffebee;
    color: #f44336;
  }
  
  &.expired {
    background-color: #f5f5f5;
    color: #999;
  }
}

.action-buttons {
  margin: 20px 10px;
  
  .back-btn {
    width: 100%;
    background-color: #fff;
    border-color: #ddd;
    color: #666;
    
    &:hover {
      background-color: #f8f8f8;
    }
  }
}

.page-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}
</style> 